<template>
	<el-container>
		<el-aside width="200px">
			<div class="logo-box">
				<img src="@/assets/img/logo.png" />
				<div><p>项目管理</p></div>
			</div>
			<el-menu :default-active="routePath" :default-openeds="openeds" @select="menuSelect" router unique-opened>
				<template v-for="item in menu">
					<el-submenu :index="item.url" v-if="item.children.length != 0">
						<template slot="title">
							<i :class="item.icon" class="icon"></i>
							<span>{{ item.name }}</span>
						</template>
						<template v-for="children in item.children">
							<el-submenu :index="children.url" v-if="children.children.length != 0">
								<template slot="title">
									<i :class="children.icon" class="icon"></i>
									<span>{{ children.name }}</span>
								</template>
								<el-menu-item :index="child.url" :key="child.id" v-for="child in children.children">{{ child.name }}</el-menu-item>
							</el-submenu>
							<el-menu-item :index="children.url" v-else>
								<i :class="children.icon" class="icon"></i>
								<span>{{ children.name }}</span>
							</el-menu-item>
						</template>
					</el-submenu>
					<el-menu-item :index="item.url" v-else>
						<i :class="item.icon" class="icon"></i>
						<span>{{ item.name }}</span>
					</el-menu-item>
				</template>
			</el-menu>
			<div class="copyright">
				<p>
					版权所有
					<br />
					北京迪文科技有限公司
				</p>
				<a href="http://www.beian.miit.gov.cn" target="_blank">京ICP备05033781号-5</a>
			</div>
		</el-aside>
		<el-container>
			<el-header>
				<div></div>
				<el-dropdown @command="userManage" trigger="click">
					<div class="user">
						<p>{{ username }}</p>
						<p>{{ real_name }}</p>
					</div>
					<el-dropdown-menu class="user_dropdown" slot="dropdown"><el-dropdown-item command="0">退出登录</el-dropdown-item></el-dropdown-menu>
				</el-dropdown>
			</el-header>
			<el-main>
				<div>
					<div class="main"><router-view @pass="passNav" v-if="IsRouterAlive"></router-view></div>
				</div>
			</el-main>
			<!-- <el-footer>Footer</el-footer> -->
		</el-container>
	</el-container>
</template>
<script>
export default {
	name: 'public',
	data() {
		return {
			username: 'username',
			real_name: 'real_name',
			menu: [],
			openeds: [],
			routePath: '',
			IsRouterAlive: true
		};
	},
	created() {
		/* try {
			this.username = this.$store.store.user.username;
		} catch (e) {
			this.$router.push({
				path: '/'
			});
			location.reload();
		} */
		this.GetMenu();
	},
	methods: {
		GetMenu() {
			this.menu = [
				{
					name: '项目统计',
					icon: 'el-icon-s-data',
					url: '/statistics',
					children: []
				},
				// {
				// 	name: '项目管理',
				// 	icon: 'el-icon-document-copy',
				// 	url: '/manage',
				// 	children: []
				// },
				{
					name: '权限管理',
					icon: 'el-icon-connection',
					url: '',
					children: [
						{
							name: '权限管理',
							icon: '',
							url: '/power',
							children: []
						},
						{
							name: '账号管理',
							icon: '',
							url: '/account',
							children: []
						}
					]
				},
				{
					name: '立项申请',
					icon: 'el-icon-edit-outline',
					url: '/add',
					children: []
				},
				{
					name: '项目申领',
					icon: 'el-icon-finished',
					url: '/apply',
					children: []
				},
				{
					name: '我的项目',
					icon: 'el-icon-document-copy',
					url: '/list',
					children: []
				},
				{
					name: '项目管理(项目经理)',
					icon: 'el-icon-reading',
					url: '/manage',
					children: []
				}
			];
			return;
			this.$api.GetMenus({}).then(data => {
				if (data.code == 0) {
				}
			});
		},
		passNav(navUrl) {
			this.routePath = navUrl;
			for (var i = 0; i < this.menu.length; i++) {
				if (navUrl == this.menu[i].url) {
					this.openeds = [];
					return false;
				}
				for (var j = 0; j < this.menu[i].children.length; j++) {
					if (navUrl == this.menu[i].children[j].url) {
						this.openeds = [this.menu[i].url];
						return false;
					}
				}
			}
		},
		menuSelect(key) {
			this.IsRouterAlive = false;
			this.$nextTick(function() {
				this.IsRouterAlive = true;
			});
		},
		userManage(command) {
			if (command == 0) {
				this.$router.push({
					path: '/'
				});
			}
		}
	},
	beforeDestroy() {}
};
</script>
<style lang="scss">
@import '~@/assets/css/element.scss';
@import '~@/assets/css/public.css';
@import '~@/assets/css/popup.css';
</style>
